<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <!-- 2021-10-22 09-16-23 00:21:26 -->
    <div id="app">
<!-- 自定义组件 -->
<!-- 父级组件可以像处理 native DOM 事件一样通过 v-on 监听子组件实例的任意事件：-->
        <counter :n="n" v-on:increment="zengjia" v-on:decrement="jianshao"></counter>
        <counter :n="n" v-on:decrement-n="zengjiaN"></counter>
        <!-- <counter :n="n" v-on:decrement-n="n-=$emit"></counter> -->
        <counter :n="n"></counter>
    </div>
    <script>
   
    Vue.component('counter',{
        props:['n'],
        data:function(){
            return{
                count:5,
            };
        },
        template:
        `<div>
        <p> parent n is {{n}},you clicked {{count}} times </p>
        <button @click='count++'>count++</button>
        <button @click='$emit("increment")'>n++</button>
        <button @click='$emit("decrement")'>n--</button>
        <button @click='$emit("decrement-n",5)'>-n</button>
        </div>
        `
    });
//    同时子组件可以通过调用内建的$emit方法 并传入事件名称来触发一个事件
//    子组件methods内部 用this.$emit
        var vm=new Vue({
            el:"#app",
            data:{
              n:10,
             
            },
            methods:{
                zengjia(){
                    // console.log(123);
                    this.n++;
                },
                jianshao(){
                    this.n--;
                },
                // 自定义事件触发的方法 默认参数就是 子组件抛出的值
                zengjiaN(a){
                    // console.log(546,a);
                    this.n-=a;
                }
            }
           
        });
      
    </script>
</body>
</html>